<template>
  <div>
    <div class="top-tu">
      <img :src="user.avatar" />
      <div>{{user.nickname}}</div>
    </div>
    <div class="nicheng">
      <p>手机号码</p>
      <input class="kuang" type="text" v-model="user.mobile" @blur="blur" />
      <!-- <div class="kuang">门前的小时光</div> -->
      <p>验证码</p>
      <div class="verify">
        <input class="kuang" type="text" v-model="verify" @blur="blur" />
        <van-button type="info" class="btn" @click="haveVerify" :disabled="flag">{{font}}</van-button>
      </div>
      <van-button type="info" class="confirm" @click="yanzheng">确定</van-button>
    </div>
  </div>
</template>
<script>
import { wxShare } from "@/mixin/share";
import { setInterval, clearInterval } from "timers";
export default {
  name: "userCenter",
  data() {
    return {
      user: this.$store.state.user,
      verify: "",
      flag: false,
      font: "获取验证码",
      count: 60
    };
  },
  mixins: [wxShare],
  mounted() {},
  methods: {
    async haveVerify() {
      let phone = this.user.mobile;
      if (!/^1[3456789]\d{9}$/.test(phone)) {
        this.$toast.fail("请输入正确的手机号");
        return false;
      }
      let res = await this.$http.post(`api/my/get_message_code`, {
        phone,
        event: "changemobile"
      });
      console.log(res);
      if (res) {
        this.flag = true;
        this.font = `重新发送(${this.count}S)`;
        let timer = setInterval(() => {
          this.count--;
          if (!this.count) {
            this.font = "重新发送";
            this.flag = false;
            clearInterval(timer);
          } else {
            this.font = `重新发送(${this.count}S)`;
          }
        }, 1000);
      }
    },
    blur() {
      window.scroll(0, 0);
    },
    async yanzheng() {
      if (this.user.mobile && this.verify) {
        let res = await this.$http.post(`api/my/modify_mobile`, {
          phone: this.user.mobile,
          sms_code: this.verify
        });
        if (res) {
          this.$store.commit("user", this.user);
          this.$toast(res.msg);
          this.$router.go(-1);
        }
      } else {
        this.$toast.fail("请完善信息");
      }
    }
  }
};
</script>

<style scoped>
.van-nav-bar {
  text-align: left;
  background: rgba(242, 242, 242, 1);
}
.van-nav-bar__left .van-nav-bar__text {
  color: black;
  font-size: 3rem;
}
.van-nav-bar__title {
  max-width: 70%;
}
.van-icon,
.van-icon::before {
  font-size: 20px;
  color: black;
}
.van-icon-arrow:before {
  font-size: 1.5rem;
  color: rgba(210, 210, 210, 1);
}
.van-cell {
  padding: 20px 16px;
}
.van-cell__left-icon {
  font-size: 0.5rem;
}
.van-cell__title {
  font-family: PingFang SC;
  font-size: 1rem;
}
.top-tu {
  position: relative;
  width: 100%;
}
.top-tu img {
  width: 104.5px;
  height: 104.5px;
  background: red;
  border-radius: 50%;
  margin: 80px auto 0;
  display: block;
  float: none;
}
.top-tu img + div {
  text-align: center;
  margin-top: 10px;
}
.nicheng {
  padding: 0 35px;
  margin-top: 40px;
}
.nicheng p {
  color: #292f36;
  font-size: 15px;
  font-weight: 400;
}
.kuang {
  outline: none;
  border: none;
  width: 307px;
  height: 44px;
  background: #f6f8fa;
  color: #292f36;
  text-align: center;
  line-height: 44px;
  font-size: 12px;
  font-weight: 500px;
  flex: 1;
  margin: 10px 0 20px;
}
.confirm {
  width: 306px;
  height: 44px;
  border-radius: 5px;
  margin-top: 60px;
}
.verify {
  display: flex;
  justify-content: space-between;
}
.btn {
  width: 110px;
  margin-left: 10px;
  font-size: 12px;
  padding: 0 10px;
  margin-top: 10px;
}
</style>
